@import "./common.less";

@left-width: 246px;
@right-width: 320px;
@header-height: 48px;
@form-minWidth: 645px;
@padding-lr: 48px;
@min-width: @left-width + @right-width + @form-minWidth + @padding-lr * 2;

.edc-form-designer {
  position: relative;
  height: 100%;

  &:after {
    content: '';
    display: table;
    clear: both;
    zoom: 1;
  }

  .ef-header {
    position: relative;
    height: @header-height;
    line-height: @header-height;
    box-shadow: 1px 0 6px 0 rgba(39,54,78,0.12);
    z-index: 10;
  }

  .ef-main {
    position: absolute;
    width: 100%;
    top: @header-height;
    bottom: 0;
    overflow: hidden;
    overflow-x: auto;
    
    & > div { 
      height: 100%;
      min-width: @min-width;

      & > div {
        height: 100%;
      }
    }
  }

  .ef-center {
    overflow: hidden;
    background: rgb(237, 240, 248);
    
    .wea-edc-form-main {
      min-height: 100%;
      padding: 32px @padding-lr;

      & > div {
        min-width: @form-minWidth;
        max-width: 900px;
        margin: 0 auto;
        height: 100%;
      }
    }
  }

  .ef-left {
    float: left;
    width: @left-width;
    box-shadow: 2px 4px 12px -4px rgba(213, 213, 213, 0.5);
    user-select: none;
  }

  .ef-right {
    float: right;
    width: @right-width;
    border-left: 1px solid #efefef;
    box-shadow: 0 9px 12px -2px rgba(39, 54, 78, 0.11);
  }

  .wea-right-menu-wrap {
    .ant-menu-item .anticon {
      margin-right: 0;
    }
  }
}

.ef-header {
  & > div {
    min-width: @form-minWidth + @padding-lr * 2;
    padding: 0 5px;
  }

  .ant-btn {
    padding: 4px 12px;
  }

  .ef-publish {
    padding-left: 10px;
    vertical-align: middle;
    color: #666;

    & > span {
      display: inline-block;
      line-height: @header-height;
      vertical-align: top;
    }

    .ef-publish-url {
      padding: 5px 10px;
      background: #efefef;
      cursor: not-allowed;
      border-radius: 3px;
      user-select: none;
      line-height: 16px;
      display: block;
      margin: 12px 5px 0;
      max-width: 320px;
      float: right;
    }

    .ef-publish-actions {
      & > i {
        font-size: 16px;
        padding: 0 5px;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }

  button {
    margin: 0 5px;
    vertical-align: baseline;

    &:last-child {
      margin-right: 0;
    }
  }
}